/*----------------grid.less(start)--------------*/
.grid{
	position: relative;
	&:after{
		display:table;
		content:'';
		clear: both;
		zoom:1;
	}
	li{
		width:33%;
		float:left;
		text-align:center;
		padding:2px;
		box-sizing:border-box;
		/*图标区域*/
		&>a{
			display:-webkit-box;
			-webkit-box-align:center;
			-webkit-box-pack:center;
			position:relative;
			box-sizing:border-box;
			margin:0px auto;
			background-size:cover;
			background-position:center;
		}
		/*文字区域*/
		&>label{
			display:block;
		    margin-top:8px;
		    overflow:hidden;
		    text-overflow:ellipsis;
		    white-space:nowrap;
		    box-sizing:border-box;
		    
		    /* font-size:12px; */
		    min-height:16px;

		    color:$sub-color;
		}
		&>a>img{
			max-width:100%;
			max-height: 100%;
		}
	}
	/*边框*/
	&.grid-bordered{
		&[data-rowspace="8"] li{
			padding-top:8px;
			padding-bottom:8px;
		}
		li{
			position: relative;
			&:before,&:after{
				content: '';
			    display: block;
			    position: absolute;
			    background-color: $border;

			    //兼容UC线条不显示的BUG
    			z-index:0;overflow: hidden;-webkit-backface-visibility:hidden;
			}
			//右竖线
			&:before{
				top: 0;
				bottom: auto;
				left: auto;
			    right: 0;
			    width: 1px;
			    height: 100%;
			    -webkit-transform-origin:right center;
			}
			//下横线
			&:after{
				top: auto;
				right: auto;
			    bottom: 0;
			    left: 0;
			    height: 1px;
			    width: 100%;
			    -webkit-transform-origin:center bottom;
			}
		}
		@media only screen and (-webkit-min-device-pixel-ratio: 2) {
			//下横线
			li:after {
				-webkit-transform: scaleY(0.5);
			}
			//右竖线
			li:before {
				-webkit-transform: scaleX(0.5);
			}
		}
		@media only screen and (-webkit-min-device-pixel-ratio: 3) {
			//下横线
			li:after {
				-webkit-transform: scaleY(0.33);
			}
			//右竖线
			li:before {
				-webkit-transform: scaleX(0.33);
			}
		}
	}
	//间距控制
	&[data-rowspace="8"] li{
		padding-top:8px;
	}
	&[data-rowspace="8"] li:last-child{
		padding-bottom:8px;
	}
	&[data-col="2"] li{
		width:50%;
		&:nth-of-type(2n){
			&:before{
				height: 0;
			}
		}
	}
	&[data-col="3"] li{
		width:33.33%;
		&:nth-of-type(3n){
			&:before{
				height: 0;
			}
		}
	}
	&[data-col="4"] li{
		width:25%;
		&:nth-of-type(4n){
			&:before{
				height: 0;
			}
		}
	}
	&[data-col="5"] li{
		width:20%;
		&:nth-of-type(5n){
			&:before{
				height: 0;
			}
		}
	}
}
/*----------------grid.less(end)----------------*/